<template>
    <el-container>
      <el-header class="follow-list-header">
        <h3>关注我的 ({{ fansList.length }})</h3>
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col v-for="user in fansList" :key="user.id" :span="24">
            <el-card shadow="hover" class="follow-card">
              <div class="follow-card-content">
                <el-avatar
                  class="user-avatar"
                  :src="user.profilePicture || 'https://i.pravatar.cc/100'"
                  size="large"
                ></el-avatar>
                <div class="user-info">
                  <h4 class="username">{{ user.username }}</h4>
                  <p class="user-bio">{{ user.bio || '这个人很神秘，什么也没有留下' }}</p>
                </div>
                <el-button
                  type="primary"
                  size="small"
                  @click="$emit('followBack', user.id)"
                >
                  回关
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script setup lang="ts">
  import { defineProps } from 'vue';
  
  const props = defineProps({
    fansList: Array
  });
  </script>
  
  <style scoped>
  .follow-list-header {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
  }
  
  .follow-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }
  
  .follow-card-content {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .user-avatar {
    flex-shrink: 0;
  }
  
  .user-info {
    flex-grow: 1;
  }
  
  .username {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
  }
  
  .user-bio {
    margin: 5px 0 0;
    color:  var(--selectRowBgColor);
  }
  </style>
  